import { Button, Card, Form, Input, Select, Table } from "antd";
import React, { useEffect, useState } from "react";
import { SearchOutlined } from "@ant-design/icons";
import "@/pages/hospital/hospitalSet/hospialSet.css";
import type { ColumnsType } from "antd/lib/table";
import type {
  HospitalListType,
  HospitalItemType,
  Status,
  ProvinceList,
} from "@/api/hospital/model/hospitalListTypes";

import {
  reqGetHospitalList,
  reqGetProvinceList,
  reqGetCityOrDistrictList,
} from "@/api/hospital/hospitalList";
import "./hospitalList.css";
import { useNavigate } from "react-router-dom";

const { Option } = Select;
export default function HospitalList() {
  const [form] = Form.useForm();
  let navigate = useNavigate();

  const [dataSource, setDataSource] = useState<HospitalListType>([]); // 需要展示的数据
  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(5);
  let [total, setTotal] = useState(100);
  const [loading, setLoading] = useState(false);
  // 省数据列表
  const [provinceList, setProvinceList] = useState<ProvinceList>([]);

  // 市数据列表
  const [cityList, setCityList] = useState<ProvinceList>([]);

  // 区数据列表
  const [districtList, setDistrictList] = useState<ProvinceList>([]);

  // 医院类型列表
  const [hosTypeList, setHosTypeList] = useState<ProvinceList>([]);

  // 需要查询的参数
  // const [value, setValue] = useState({});

  // 获取市区列表
  const getCityList = async (value: any) => {
    setCityList([]);
    setDistrictList([]);
    form.setFieldsValue({ cityCode: undefined, districtCode: undefined });

    // console.log(value);
    let res = await reqGetCityOrDistrictList(value);
    setCityList(res);
  };

  // 获取区列表
  const getDistrictList = async (value: any) => {
    setDistrictList([]);
    form.setFieldsValue({ districtCode: undefined });
    let res = await reqGetCityOrDistrictList(value);
    setDistrictList(res);
  };

  // 获取医院类型列表
  const gethosType = async (id = 10000) => {
    let res = await reqGetCityOrDistrictList(id);
    setHosTypeList(res);
  };

  //  获取医院列表
  const getHospitalList = async (page = current, limit = pageSize) => {
    // 显示 loading
    setLoading(true);
    // 设置当前页
    setCurrent(page);
    // 设置每页展示条数
    setPageSize(limit);
    const values = form.getFieldsValue();
    const res = await reqGetHospitalList({ page, limit, ...values });
    // 更新数据

    setDataSource(res.content);
    setTotal(res.totalElements);
    setLoading(false);
  };

  // 组件加载完成时请求数据
  useEffect(() => {
    getHospitalList();
  }, [current, pageSize]);

  // 获取省份列表数据
  useEffect(() => {
    async function main() {
      let res = await reqGetProvinceList();
      setProvinceList(res);
    }
    main();
    gethosType();
  }, []);

  // 点击查询 事件
  function onfinish() {
    getHospitalList();
  }

  function onreset() {
    getHospitalList();
  }

  // 带id 跳转 详情页
  function goHospitalShow(id: string) {
    return () => {
      navigate(`/syt/hospital/hospitallist/show/${id}`);
    };
  }

  const columns: ColumnsType<any> = [
    {
      title: "序号",
      width: "70px",
      align: "center",
      render: (x: any, y: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "医院logo",
      align: "center",
      dataIndex: "logoData",
      render: (logo: string) => {
        return (
          <img
            src={"data:image/jpeg;base64," + logo}
            alt="logo"
            className="logo"
          />
        );
      },
    },
    {
      title: "医院名称",
      align: "center",
      dataIndex: "hosname",
    },
    {
      title: "等级",
      align: "center",
      render: (values) => {
        return values.param.hostypeString;
      },
    },
    {
      title: "详细地址",
      align: "center",
      render: (values) => {
        return values.param.fullAddress;
      },
    },
    {
      title: "状态",
      align: "center",
      render: (values) => {
        return values.status === 0 ? "已上线" : "未上线";
      },
    },
    {
      title: "创建时间",
      align: "center",
      dataIndex: "createTime",
    },
    {
      title: "操作",
      align: "center",
      fixed: "right",
      width: "260px",
      render: (value, row) => {
        return (
          <>
            <Button
              type="primary"
              size="small"
              onClick={goHospitalShow(row.id)}
            >
              查看
            </Button>
            <Button type="primary" className="ml" size="small">
              排班
            </Button>
            <Button type="primary" className="ml" size="small">
              上线
            </Button>
          </>
        );
      },
    },
  ];
  return (
    <>
      <Card>
        {/* 搜索框 */}
        <Form layout="inline" form={form} onFinish={onfinish} onReset={onreset}>
          <Form.Item name="provinceCode">
            <Select
              style={{ width: 180 }}
              placeholder="请选择省"
              onChange={getCityList}
            >
              {provinceList.map((item) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item name="cityCode">
            <Select
              style={{ width: 180 }}
              placeholder="请选择市"
              onChange={getDistrictList}
            >
              {cityList.map((item) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item name="districtCode">
            <Select style={{ width: 180 }} placeholder="请选择区">
              {districtList.map((item) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>

          <Form.Item name="hostype">
            <Select style={{ width: 180 }} placeholder="医院类型">
              {hosTypeList.map((item) => {
                return (
                  <Option key={item.id} value={item.value}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item name="status">
            <Select
              style={{ width: 180 }}
              placeholder="医院状态"
              className="mt"
            >
              {/* jsx语法  存放数字才会是number类型 */}
              <Option value={0}>已上线</Option>
              <Option value={1}>已下线</Option>
            </Select>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className="mt">
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className="mt">
            <Button type="default" htmlType="reset">
              清除
            </Button>
          </Form.Item>
        </Form>

        <Table
          className="mt"
          loading={loading}
          dataSource={dataSource} //表格数据
          columns={columns} //表头数据
          bordered // 边框
          rowKey="id" // 每行的key
          pagination={{
            // 分页器配置
            current, //当前页
            pageSize, // 每页展示条数
            total, //总条数
            pageSizeOptions: [5, 10, 20, 100], //每页展示条数 可选
            showQuickJumper: true, // 展示快速跳转页面
            showSizeChanger: true, // 展示切换器

            showTotal: (total) => {
              return <span>总条数:{total}</span>;
            },
            onChange: (page, limit) => {
              //   console.log(page, limit);
              setCurrent(page);
              setPageSize(limit);
            },
          }}
          scroll={{ x: 1500 }}
        />
      </Card>
    </>
  );
}
